<template>
	<view class="login-container">
		<view class="login-header">
			<text class="title">用户登录</text>
		</view>
		
		<view class="login-form">
			<view class="input-group">
				<text class="placeholder-icon"></text>
				<input class="input" type="text" placeholder="请输入用户名" v-model="loginForm.account" />
			</view>
			<view class="input-group">
				<text class="placeholder-icon"></text>
				<input class="input" type="password" placeholder="请输入密码" v-model="loginForm.password" />
			</view>
			<button class="login-btn" @click="handleLogin" :disabled="loading">
				{{ loading ? '登录中...' : '登录' }}
			</button>
			<button class="register-btn" @click="handleRegister">注册账号</button>
		</view>
	
		
		<view class="divider">
			<text>或</text>
		</view>
		
		<view class="wechat-login">
			<button class="wechat-btn" @click="handleWechatLogin">
				<text class="placeholder-icon"></text>
				<text>微信一键登录</text>
			</button>
		</view>
		
		<view class="agreement">
			<text>登录即表示您同意</text>
			<text class="link" @click="handleAgreement">用户协议</text>
			<text>和</text>
			<text class="link" @click="handlePrivacy">隐私政策</text>
		</view>
	</view>
</template>

<script>
	import { saveUserInfo, clearUserInfo, isJwtToken, parseJwtToken } from '../../utils/auth.js';
	
	export default {
		data() {
			return {
				loginForm: {
					account: '',
					password: ''
				},
				loading: false
			}
		},
		onLoad() {
			// 页面加载时清除之前的登录状态，确保可以重新登录
			clearUserInfo();
		},
		methods: {
			// 普通登录
			async handleLogin() {
				// 表单验证
				if (!this.loginForm.account || !this.loginForm.password) {
					uni.showToast({
						title: '请输入账号和密码',
						icon: 'none'
					});
					return;
				}
				
				this.loading = true;
				try {
					// 引入登录API
					const userApi = await import('../../apis/user.js');
					
					// 调用登录接口
					const res = await userApi.login(this.loginForm);
					console.log('登录响应:', res);
					
					if (res.code === 0) {
						// 登录成功，直接从返回数据中获取完整用户信息
						const userInfo = res.data;
						console.log('用户信息:', userInfo);
						
						// 检查token是否存在
						if (!res.data.token) {
							uni.showToast({
								title: '登录失败：服务器未返回有效Token',
								icon: 'none'
							});
							return;
						}
						
						const token = res.data.token;
						console.log('Token:', token);
						
						// 验证token格式
						if (!isJwtToken(token)) {
							uni.showToast({
								title: '登录失败：Token格式不正确',
								icon: 'none'
							});
							return;
						}
						
						// 保存用户信息
						saveUserInfo(token, userInfo);
						
						// 验证token是否存储成功
						const storedToken = uni.getStorageSync('token');
						console.log('存储的Token:', storedToken);
						
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						
						// 根据角色跳转到不同主页
						setTimeout(() => {
							if (userInfo.roles == 'staff') {
								// 员工跳转到工单列表页面
								uni.switchTab({ url: '/pages/ticket/ticket' });
							} else {
								// 客户跳转到客户端主页
								uni.switchTab({ url: '/pages/customer/clientHome' });
							}
						}, 1000);
					} else {
						// 登录失败，显示错误信息
						uni.showToast({
							title: res.message || '登录失败',
							icon: 'none'
						});
					}
				} catch (error) {
					// 网络或其他异常
					console.error('登录失败:', error);
					uni.showToast({
						title: '登录失败: ' + (error.msg || error.message || '未知错误'),
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			
			// 使用测试账号登录
			useTestAccount(role) {
				if (role === 'client') {
					this.loginForm.account = 'client';
					this.loginForm.password = 'client123';
				} else if (role === 'staff') {
					this.loginForm.account = 'staff';
					this.loginForm.password = 'staff123';
				}
				
				this.handleLogin();
			},
			
			// 微信登录
			handleWechatLogin() {
				uni.showToast({
					title: '微信登录功能开发中',
					icon: 'none'
				});
			},
			
			// 跳转到注册页面
			handleRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			},
			
			// 查看用户协议
			handleAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				});
			},
			
			// 查看隐私政策
			handlePrivacy() {
				uni.navigateTo({
					url: '/pages/privacy/privacy'
				});
			}
		}
	}
</script>

<style>
	.login-container {
		padding: 20px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.login-header {
		text-align: center;
		margin-bottom: 40px;
		padding-top: 60px;
	}
	
	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}
	
	.login-form {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}
	
	.input-group {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding: 15px 0;
	}
	
	.placeholder-icon {
		width: 20px;
		height: 20px;
		background-color: #ddd;
		border-radius: 10px;
		margin-right: 10px;
	}
	
	.input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 16px;
	}
	
	.login-btn {
		width: 100%;
		height: 45px;
		background-color: #007AFF;
		color: #fff;
		border: none;
		border-radius: 25px;
		font-size: 16px;
		margin-top: 20px;
	}
	
	.login-btn:disabled {
		background-color: #ccc;
	}
	
	.register-btn {
		width: 100%;
		height: 45px;
		background-color: #fff;
		color: #007AFF;
		border: 1px solid #007AFF;
		border-radius: 25px;
		font-size: 16px;
		margin-top: 10px;
	}
	
	.divider {
		text-align: center;
		margin: 30px 0;
		position: relative;
		color: #999;
	}
	
	.divider::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 1px;
		background-color: #eee;
		z-index: 1;
	}
	
	.divider text {
		position: relative;
		background-color: #f5f5f5;
		padding: 0 15px;
		z-index: 2;
	}
	
	.wechat-login {
		text-align: center;
	}
	
	.wechat-btn {
		width: 80%;
		height: 45px;
		background-color: #07c160;
		color: #fff;
		border: none;
		border-radius: 25px;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}
	
	.agreement {
		text-align: center;
		margin-top: 30px;
		font-size: 12px;
		color: #999;
	}
	
	.link {
		color: #007AFF;
	}
</style>